<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/10/17
  Time: 15:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新闻发布</title>
    <!--引入elementui的样式-->
    <!-- 引入外部样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <!-- 引入相关插件，也叫依赖-->
    <!--引入vue的依赖，必须在elementui之前引入vue-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <style>
        #page{
            padding: 2px 400px;
        }

        #newsContent{
            line-height:8;
        }

    </style>
</head>
<body>
<div id="app">
    <el-main>
        <%--根据所需要求进行查询--%>
        <el-form :inline="true" :model="newsSeacherForm" class="demo-form-inline">
            <el-form-item label="新闻标题">
                <el-input v-model="newsSeacherForm.newsTitle" placeholder="新闻标题"></el-input>
            </el-form-item>
            <el-form-item label="申报类别">
                <el-select v-model="newsSeacherForm.kindId"  placeholder="新闻类别">
                    <el-option
                            v-for="item in kindData"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="审核人">
                <el-input v-model="newsSeacherForm.newsUser" placeholder="审核人"></el-input>
            </el-form-item>
            <el-form-item label="审核状态">
                    <el-select v-model="newsSeacherForm.newsStatus"  placeholder="请选择">
                        <el-option label="通过" value="1"></el-option>
                        <el-option label="已发布" value="2"></el-option>
                        <el-option label="未通过" value="3"></el-option>
                    </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"  @click="onSubmit()">查询</el-button>
            </el-form-item>
        </el-form>
        <!--表格部分-->
        <el-table
                :data="tableData"
                border
                style="width:100%">
            <el-table-column
                    prop="id"
                    label="申报编号"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="newsAuthor"
                    label="申报者"
                    width="110">
            </el-table-column>
            <el-table-column
                    prop="newsTitle"
                    label="新闻标题"
                    width="220">
            </el-table-column>
            <el-table-column
                    prop="kind.name"
                    label="新闻类别"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="newsTime"
                    label="申报时间"
                    width="200">
            </el-table-column>
<%--            <el-table-column--%>
<%--                    prop="newsContent"--%>
<%--                    label="新闻内容">--%>
<%--            </el-table-column>--%>
            <el-table-column
                    prop="newsUser"
                    label="审核人"
                    width="110">
            </el-table-column>
            <el-table-column
                    prop="newsOuttime"
                    label="审核时间"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="newsStatus"
                    label="审核状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.newsStatus==1">
                         <el-button type="success" plain  @click=" publishPass(scope.row)" >审核通过,待发布</el-button>
                    </span>
                    <span v-if="scope.row.newsStatus==5">
                         <el-button type="success" plain  @click="upNews()" >新闻已发布</el-button>
                    </span>
                    <span v-if="scope.row.newsStatus==2">
                         <el-button type="success" plain  @click="upNews()" >已上线，尽情欣赏</el-button>
                    </span>
                    <span v-if="scope.row.newsStatus==4">
                         <el-button type="danger" plain  @click="downNews()" >已下线,很遗憾</el-button>
                    </span>
                    <span v-if="scope.row.newsStatus==3">
                         <el-button type="danger" plain @click="queryReason(scope.row)">拒绝理由</el-button>
                         <el-button type="success" plain @click="resubmitNews(scope.row)">重新提交</el-button>
                    </span>
                </template>
            </el-table-column>
        </el-table>


            <%--拒绝理由的弹窗--%>
            <el-dialog
                    title="意见反馈"
                    :visible.sync="dialogVisible"
                    width="30%">
                <el-form  label-width="80px" >
                    <el-form-item >{{newsReason}}</el-form-item>
                </el-form>
            </el-dialog>


            <!--修改重新提交的弹出层dialogVisible1 控制对话框的显示和隐藏-->
            <el-dialog
                    title="发布新闻"
                    :visible.sync="dialogVisible1"
                    width="30%">
                <!--:model:绑定表单数据-->
                <el-form  label-width="80px" :model="editForm">
                    <el-form-item label="申报者">
                        <el-input v-model="editForm.newsAuthor"></el-input>
                    </el-form-item>
                    <el-form-item label="新闻标题">
                        <el-input v-model="editForm.newsTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="新闻类别">
                        <el-select v-model="editForm.kindId"  placeholder="请选择新闻类别" style="width: 100%">
                            <el-option
                                    v-for="item in news"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="申报时间">
                        <el-date-picker
                                v-model="editForm.newsTime"
                                type="datetime"
                                style="width: 100%"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="新闻内容">
                        <el-input v-model="editForm.newsContent"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="updateNews()">确认提交</el-button>
                      </span>
            </el-dialog>



            <!-- 分页   -->
            <div id="page">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>

    </el-main>
</div>
</body>
<script>
    var app= new Vue({
        el:"#app",
        data: {
            tableData:[],
            kindData:[],
            //表单搜索对象,定义根据新闻的参数
            newsSeacherForm:{},
            //拒绝理由时的弹窗的初始值
            dialogVisible:false,
            //定义一个意见反馈的对象
            newsReason:'',
            //重新提交时的弹窗的初始值
            dialogVisible1:false,
            //修改重新提交的表单
            editForm:{},
            //定义一个选择新闻类别的集合
            news:[],
            //当前显示的页码
            currentPage:1,
            //每页显示的条数
            pageSize:5,
            //总条数
            total:0,
        },
        created(){
            this.initTable();
        },
        methods: {
            //查询按钮
            onSubmit(){
                this.initTable();
                this.newsSeacherForm={};
            },
            // 查询所有内容
            initTable(){
                axios.post("/news/list?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.newsSeacherForm).then(resp=>{
                    // console.log(resp.data.data.list);
                    this.tableData=resp.data.data.list;
                    this.total=resp.data.data.total;
                });
                this.kind();
            },
            //查询新闻类型
            kind(){
                axios.post("/kind/list").then(resp=>{
                    this.kindData=resp.data.data;
                });
            },

            //拒绝理由
            queryReason(row){
                this.dialogVisible = true;
                axios.post("/news/queryReason?id="+row.id).then(resp=>{
                    console.log(resp)
                    if(resp.data.code === 200){
                        this.newsReason = resp.data.data.newsReason;
                    }
                })
            },

            //重新提交
            resubmitNews(row){
                //1.显示对话框
                this.dialogVisible1 = true;
                //在此转json是为了把数据固定阻断双向绑定里面的数据同步
                let parse = JSON.parse(JSON.stringify(row));
                //2.绑定表单数据
                this.editForm = parse;
                axios.post("/kind/list").then(resp=>{
                    this.news=resp.data.data;
                })
            },

            //确认重新提交
            updateNews(){
                this.editForm.newsStatus=0
                console.log(this.editForm)
                axios.post("/news/updateNews",this.editForm).then(resp=>{
                    if(resp.data.code === 200){
                        this.$message.success("修改新闻成功");
                        this.dialogVisible1 = false;
                        this.initTable();
                    }
                })
            },
            //审核成功，待发布
            publishPass(row){
                this.editForm.id=row.id
                this.editForm.newsStatus=5
                axios.post("/news/updateNews",this.editForm).then(resp=>{
                    if(resp.data.code === 200){
                        this.initTable();
                    }
                })
            },

            //分页
            handleSizeChange(val) {
                this.pageSize= val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },



        }
    })
</script>
</html>